<!-- 招商合作 -->
<template>
    <div>
        <a-card title="" :bordered="false">
            <div class="title">项目招商环节相关信息</div>
           
            <a-form @submit="handleSubmit" class="form" layout="horizontal" :form="form">
                <a-row class="form-row" :gutter="32">
                    <a-col :span="8">
                        <a-form-item label="项目编号">
                            <a-input
                                disabled
                                placeholder="请输入项目编号"
                                v-decorator="['project_number',{initialValue: projectNumber},
                                {rules: [{ required: true, message: '请输入项目编号', whitespace: true}]}]"/>
                        </a-form-item>
                    
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="项目名称">
                            <a-input
                                disabled
                                placeholder="请输入项目名称"
                                v-decorator="['project_name',{initialValue: projectName},
                                {rules: [{ required: true, message: '请输入项目名称', whitespace: true}]}]"/>
                        </a-form-item>
    
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="开发类型">
                            <a-select placeholder="开发类型"
                                      v-decorator="[ 'development_type',{initialValue: dataInit.devType},
                                       {rules: [{ required: true, message: '开发类型'}]} ]">
                                <a-select-option
                                    v-for="(item,index) in devTypeData"
                                    :key="index"
                                    :value="item.name">{{item.name}}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="记录年月度">
                            <a-month-picker
                                style="width: 100%"
                                v-decorator="['record_month',
                                {rules: [{ required: true, message: '记录月份'}]}]"/>
                        </a-form-item>
    
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="本年计划总投资">
                            <a-input
                                placeholder="本年计划总投资"
                                v-decorator="['investment_years_plan',
                                {rules: [{ required: true, message: '本年计划总投资', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="本月投资完成">
                            <a-input
                                placeholder="本月投资完成"
                                v-decorator="['investment_month_total',
                                {rules: [{ required: true, message: '本月投资完成', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="至本年初累计完成投资">
                            <a-input
                                disabled
                                placeholder="至本年初累计完成投资"
                                v-decorator="['investment_total_last_year',{initialValue: totalData.lastYearTotal},
                                {rules: [{ required: true, message: '至本年初累计完成投资', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="至本月初本年投资完成">
                            <a-input
                                disabled
                                placeholder="至本月初本年投资完成"
                                v-decorator="['investment_total_last_month',{initialValue: totalData.yearsTotalLastMonth},
                                {rules: [{ required: true, message: '至本月初本年投资完成', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="本年累计投资">
                            <a-input
                                disabled
                                placeholder="本年累计投资"
                                v-decorator="['investment_years_total',{initialValue: totalData.yearsTotal},
                                {rules: [{ required: true, message: '本年累计投资', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="项目累计投资">
                            <a-input
                                disabled
                                placeholder="项目累计投资"
                                v-decorator="['investment_project_total',{initialValue: totalData.projectTotal},
                                {rules: [{ required: true, message: '项目累计投资', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="16">
                        <a-form-item label="总体进度">
                            <a-input
                                placeholder="总体进度"
                                v-decorator="['total_progress',
                                {rules: [{ required: true, message: '总体进度', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                
                <a-row class="form-row" :gutter="32">
                    <a-col :span="8">
                        <a-form-item
                            label="建档人员">
                            <a-input
                                placeholder="建档人员"
                                v-decorator="['creator',
                                {rules: [{ required: true, message: '建档人员', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="建档日期">
                            <a-date-picker
                                           style="width: 100%"
                                           v-decorator="['create_date',
                                {rules: [{ required: true, message: '建档日期'}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                       
                        <a-form-item
                            label="备注">
                            <a-input
                                placeholder="备注"
                                v-decorator="['remark',
                                {rules: [{ required: true, message: '备注', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row class="form-row" :gutter="32">
                    <a-col :span="12">
                        <a-form-item label="形象进度">
                            <up-load-drag @change="handleUploadChange"></up-load-drag>
                        </a-form-item>
                    </a-col>
    
                </a-row>
                <!--                <a-button type="primary" :loading="loading" htmlType="submit">提交</a-button>-->
                <footer-tool-bar>
                    <a-button type="primary" :loading="loading" htmlType="submit">提交</a-button>
                </footer-tool-bar>
            </a-form>
        </a-card>
        <!--         fixed footer toolbar -->
    
    </div>
</template>

<script>

    import FooterToolBar from '@/components/tools/FooterToolBar'
    import indexedDB from '@/db/db'
    import moment from 'moment'
    import UpLoadDrag from '@/components/upload/UpLoadDrag'
    export default {
        name: "DevelementPlans",
        components: {
            FooterToolBar,
            UpLoadDrag
        },
        props:{
            projectNumber: String,
            projectName: String,
            totalData: Object,
        },
        data() {
            return {
                loading: false,
                form: this.$form.createForm(this),
                //
                dataInit: {
                    test: '123',
                    devType: '一般性'
                },
                hasDev: false,
                devTypeData:[],
                filesList:[]

            }
        },
        mounted() {
           
            indexedDB.handleDataByIndex('dictionary', IDBKeyRange.only(5),'type_id')
                .then(res => {
                    this.devTypeData = res
                })
          
        },
        methods: {
            handleUploadChange(list){
                // console.log(list)
                this.filesList = list
            },
            handleSubmit(e) {
                e.preventDefault()
                this.form.validateFields((err, values) => {
                    if (!err) {
                        // eslint-disable-next-line no-console
                        console.log('Received values of form: ', values)
                        // indexedDB 不支持date格式  转换成字符串
                        values.create_date = moment(values.create_date).format('YYYY-MM-DD')
                        values.record_month = moment(values.record_month).format('YYYY-MM')
                        values.year = moment(values.record_month).format('YYYY')
                        values.month = moment(values.record_month).format('MM')
                        values.files = this.filesList
                        console.log(values)
                        indexedDB.insert({name:'projectProgress'}, values).then(res => {
                            this.$emit('saveSuccess')
                            this.$success({
                                title: `保存成功`,
                                content: `点击确定返回`,
                            })
                        })
                    }
                })
            },
            
        },
    }
</script>

<style lang="scss" scoped>
    .card {
        margin-bottom: 24px;
    }
    .title {
        font-size: 20px;
        line-height: 28px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        margin: 16px 0 30px 0;
    }
</style>